<template>
  <div>
    <el-dialog title="设置" :visible.sync="visible" width="30%" center :close-on-click-modal="false">
      <span>这是设置页面</span>
      <span slot="footer" class="dialog-footer" :close-on-click-modal="false">
        <el-button class="cancelButton" @click="visible = false">取 消</el-button>
        <el-button class="okButton" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
  return{
    visible:false
  }
},
props:{
  settingVisible:Boolean
},
model: {
  prop: 'settingVisible',
  event: 'change'
},
  watch: {
    'settingVisible': {
      handler(newVal) {
        this.visible = newVal
      }
    },
    'visible': {
      handler(newVal) {
        this.$emit('change', newVal)
      }
    }


  }
}
</script>

<style>
.el-dialog{
  border-radius: 20px !important;
}
</style>